import { Card,Breadcrumb, Form,Radio, Button,DatePicker,Table,Tag,Space,Modal, message } from 'antd'
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import {ArticleStatus} from 'api/constants'
import { delArticles, getArticles } from 'api/article'
import errImg from 'assets/error.png'
import {EditOutlined,DeleteOutlined,ExclamationCircleOutlined} from '@ant-design/icons'
import Channel from 'components/Channel'
const {confirm}=Modal
const {RangePicker}= DatePicker
export default class ArticleList extends Component {
  // 列
  columns= [
  {
    title: '封面',
    render(data){
      if (data.cover.type===0)return <img src={errImg} alt='' style={{width:200,height:120,objectFit:'cover'}}></img>
      return <img src={data.cover.images[0]} alt='' style={{width:200,height:120,objectFit:'cover'}}></img>
    }
  },
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '状态',
    dataIndex: 'status',
    render(status){
      const obj =ArticleStatus.find(item=>item.id===status)
      return <Tag color={obj.color}>{obj.name}</Tag>
    }
  },
  {
    title: '发布时间',
    dataIndex: 'pubdate',
  },{
    title: '阅读数',
    dataIndex: 'read_count',
  },{
    title: '评论数',
    dataIndex: 'comment_count',
  },{
    title: '点赞数',
    dataIndex: 'like_count',
  },{
    title: '操作',
    render:(data)=>{
      return <Space><Button type="primary" shape="circle" icon={<EditOutlined />} onClick={()=>this.handleEdit(data.id)} />
       <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} onClick={()=>this.handleDelete(data.id)} /></Space> // Space能让组件间有空隙
    }
  }
];
  state={
    // 文章列表
    articles:{}
  }
  // 参数
  params={
    page:1, // 页
    per_page:10 // 条
  }
  render() {
    const {total_count,results,per_page,page} = this.state.articles
    return (
      <div>
        <Card title={
      <Breadcrumb>
    <Breadcrumb.Item>
    <Link to="/home">首页</Link> 
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      文章列表
    </Breadcrumb.Item>
  </Breadcrumb>
}>
  {/* 表单 */}
  <Form onFinish={this.onFinish} initialValues={{status:-1}}>
    {/* 状态 */}
    <Form.Item label="状态" name="status">
        <Radio.Group>
          {ArticleStatus.map(item=> (<Radio value={item.id} key={item.id}>{item.name}</Radio>) )}
  </Radio.Group>
    </Form.Item>
{/* 频道 */}
<Form.Item label="频道" name="channel_id"><Channel></Channel></Form.Item>
{/* 日期 */}
<Form.Item label="日期" name="date">
  <RangePicker></RangePicker>
</Form.Item>

{/* 筛选 */}
    <Form.Item>
      <Button type='primary' htmlType='submit'>筛选</Button>
    </Form.Item>
  </Form>
        </Card>
        {/* 结果 */}
        <Card title={"查询到"+total_count+"条结果"}>
          <Table columns={this.columns} dataSource={results} rowKey="id" pagination={{total:total_count,pageSize:per_page,current:page,onChange:this.onChange}} />
        </Card>
        </div>
    )
  }
  // 筛选
  onFinish=(values)=>{
if(values.status!==undefined){
  this.params.status=values.status
}
if(this.params.status===-1){
  delete this.params.status
}
if(values.channel_id!==undefined){
  this.params.channel_id=values.channel_id
}else{
  delete this.params.channel_id
}
if(values.date){
  this.params.begin_pubdate=values.date[0].startOf('day').format('YYYY-MM-DD HH:mm:ss')
  this.params.end_pubdate=values.date[1].endOf('day').format('YYYY-MM-DD HH:mm:ss')
}else{
  delete this.params.begin_pubdate
  delete this.params.end_pubdate
}
this.params.page=1
this.getArticleList()
  }
  // 获取文章列表
  getArticleList=async()=>{
    const res = await getArticles(this.params)
    this.setState({
      articles:res.data
    })
  }
   componentDidMount(){
    this.getArticleList()
  }
  // 翻页
onChange=(page,pageSize)=>{
this.params.page=page
this.params.per_page=pageSize
this.getArticleList()
}
// 删除
handleDelete=(id)=>{
confirm({
  title:'提示',
  icon:<ExclamationCircleOutlined></ExclamationCircleOutlined>,
  content:'确认删除？',
  onOk:async()=>{
    await delArticles(id)
    this.getArticleList()
    message.success('删除成功')
}
})
}
// 修改
handleEdit=(id)=>{
  this.props.history.push('/home/publish/'+id)
}
}
